<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - 古诗小程序</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 3px solid white;
        }

        .guide-card {
            background-color: #EDF2F7;
            border: 2px dashed #CBD5E0;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .guide-card:hover {
            background-color: #E2E8F0;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            background-color: #E2E8F0;
            border-radius: 20px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 14px;
            color: #4A5568;
        }

        .chip i {
            margin-right: 6px;
            font-size: 12px;
        }

        .preferences-section {
            margin-bottom: 24px;
        }

        .pref-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .pref-title i {
            margin-right: 8px;
            color: #4A5568;
        }

        .add-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #EBF4FF;
            color: #3182CE;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body class="bg-gray-100">
    <div class="phone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span>19:02</span>
            <div class="flex items-center">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content pb-24">
            <!-- 用户信息 -->
            <div class="card flex items-center p-6 mb-6">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="avatar">
                <div class="ml-4">
                    <h2 class="text-xl font-bold mb-1">古诗爱好者</h2>
                    <p class="text-gray-500 text-sm">已加入 32 天</p>
                </div>
            </div>

            <!-- 首次使用引导卡片 -->
            <div class="guide-card" id="firstTimeGuide">
                <div class="bg-yellow-100 text-yellow-700 rounded-lg p-3 mb-4 text-sm">
                    <i class="fas fa-lightbulb mr-2"></i>
                    完善您的偏好，获取更精准的古诗推荐
                </div>
                <button class="btn btn-primary w-full" onclick="hideFirstTimeGuide()">开始设置</button>
            </div>

            <!-- 喜欢的作者 -->
            <div class="preferences-section">
                <div class="flex justify-between items-center mb-3">
                    <div class="pref-title">
                        <i class="fas fa-user-edit"></i> 喜欢的作者
                    </div>
                    <button class="add-btn" onclick="showPopup('authorPopup')">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>

                <div class="flex flex-wrap" id="authorList">
                    <span class="chip"><i class="fas fa-user"></i> 李白</span>
                    <span class="chip"><i class="fas fa-user"></i> 杜甫</span>
                    <span class="chip"><i class="fas fa-user"></i> 王维</span>
                </div>
            </div>

            <!-- 喜欢的题材 -->
            <div class="preferences-section">
                <div class="flex justify-between items-center mb-3">
                    <div class="pref-title">
                        <i class="fas fa-bookmark"></i> 喜欢的题材
                    </div>
                    <button class="add-btn" onclick="showPopup('themePopup')">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>

                <div class="flex flex-wrap" id="themeList">
                    <span class="chip"><i class="fas fa-tag"></i> 山水</span>
                    <span class="chip"><i class="fas fa-tag"></i> 思乡</span>
                    <span class="chip"><i class="fas fa-tag"></i> 边塞</span>
                </div>
            </div>

            <!-- 收藏统计 -->
            <div class="card">
                <h3 class="font-semibold mb-4">收藏统计</h3>
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div class="p-3">
                        <div class="text-xl font-bold text-blue-500 mb-1">12</div>
                        <div class="text-xs text-gray-500">收藏古诗</div>
                    </div>
                    <div class="p-3">
                        <div class="text-xl font-bold text-green-500 mb-1">5</div>
                        <div class="text-xs text-gray-500">收藏作者</div>
                    </div>
                    <div class="p-3">
                        <div class="text-xl font-bold text-purple-500 mb-1">7</div>
                        <div class="text-xs text-gray-500">阅读天数</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" data-page="poem">
                <i class="fas fa-book"></i>
                <span>古诗</span>
            </div>
            <div class="tab-item" data-page="search">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </div>
            <div class="tab-item active" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- 添加作者弹出层 -->
        <div id="authorPopup" class="popup">
            <div class="popup-header">
                <h3 class="font-semibold">添加喜欢的作者</h3>
                <button class="popup-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="popup-content">
                <div class="form-group">
                    <label class="form-label">作者名称</label>
                    <input type="text" class="form-input" placeholder="请输入作者名称" id="authorInput">
                </div>

                <h4 class="font-semibold mb-3 mt-6">推荐作者</h4>
                <div class="grid grid-cols-2 gap-3">
                    <div class="chip cursor-pointer" onclick="addAuthor('苏轼')">
                        <i class="fas fa-user"></i> 苏轼
                    </div>
                    <div class="chip cursor-pointer" onclick="addAuthor('白居易')">
                        <i class="fas fa-user"></i> 白居易
                    </div>
                    <div class="chip cursor-pointer" onclick="addAuthor('辛弃疾')">
                        <i class="fas fa-user"></i> 辛弃疾
                    </div>
                    <div class="chip cursor-pointer" onclick="addAuthor('陆游')">
                        <i class="fas fa-user"></i> 陆游
                    </div>
                </div>

                <button class="btn btn-primary w-full mt-6" onclick="addCustomAuthor()">确认添加</button>
            </div>
        </div>

        <!-- 添加题材弹出层 -->
        <div id="themePopup" class="popup">
            <div class="popup-header">
                <h3 class="font-semibold">添加喜欢的题材</h3>
                <button class="popup-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="popup-content">
                <div class="form-group">
                    <label class="form-label">题材名称</label>
                    <input type="text" class="form-input" placeholder="请输入题材名称" id="themeInput">
                </div>

                <h4 class="font-semibold mb-3 mt-6">推荐题材</h4>
                <div class="grid grid-cols-2 gap-3">
                    <div class="chip cursor-pointer" onclick="addTheme('爱情')">
                        <i class="fas fa-tag"></i> 爱情
                    </div>
                    <div class="chip cursor-pointer" onclick="addTheme('田园')">
                        <i class="fas fa-tag"></i> 田园
                    </div>
                    <div class="chip cursor-pointer" onclick="addTheme('送别')">
                        <i class="fas fa-tag"></i> 送别
                    </div>
                    <div class="chip cursor-pointer" onclick="addTheme('咏物')">
                        <i class="fas fa-tag"></i> 咏物
                    </div>
                </div>

                <button class="btn btn-primary w-full mt-6" onclick="addCustomTheme()">确认添加</button>
            </div>
        </div>

        <!-- 遮罩层 -->
        <div id="overlay" class="overlay"></div>
    </div>

    <script src="common.js"></script>
    <script>
        // 隐藏首次使用引导
        function hideFirstTimeGuide() {
            document.getElementById('firstTimeGuide').style.display = 'none';
            showPopup('authorPopup');
        }

        // 添加作者
        function addAuthor(name) {
            const authorList = document.getElementById('authorList');
            const chip = document.createElement('span');
            chip.className = 'chip';
            chip.innerHTML = `<i class="fas fa-user"></i> ${name}`;
            authorList.appendChild(chip);
            hidePopup('authorPopup');
        }

        // 添加自定义作者
        function addCustomAuthor() {
            const authorInput = document.getElementById('authorInput');
            if (authorInput.value.trim() !== '') {
                addAuthor(authorInput.value.trim());
                authorInput.value = '';
            }
        }

        // 添加题材
        function addTheme(name) {
            const themeList = document.getElementById('themeList');
            const chip = document.createElement('span');
            chip.className = 'chip';
            chip.innerHTML = `<i class="fas fa-tag"></i> ${name}`;
            themeList.appendChild(chip);
            hidePopup('themePopup');
        }

        // 添加自定义题材
        function addCustomTheme() {
            const themeInput = document.getElementById('themeInput');
            if (themeInput.value.trim() !== '') {
                addTheme(themeInput.value.trim());
                themeInput.value = '';
            }
        }
    </script>
</body>

</html>